<template>
  <h1>列表渲染</h1>

  <p v-for="item in names">{{ item }}</p>
  <p v-for="name in names">{{ name }}</p>

  <p v-for="(name, index) in names">{{ name}}--{{index }}</p>

  <div v-for="item in result">
    <p>{{ item.name }}</p>
    <p>{{ item.age }}</p>
    <!-- v-bind:可以简写成: -->
    <img :src="item.avator" alt="" />
  </div>

<div>
  <p v-for="item in userInfo">{{item}}</p>
  <p v-for="(value,key,index) of userInfo">{{value}}--{{key}}--{{index}}</p>

</div>

</template>

<script>
export default {
  data() {
    return {
      names: ["张三", "李四", "百战学it"],
      result: [
        { name: "张三", 
        age: 20, 
        avator: "https://img.yzcdn.cn/vant/cat.jpeg" 
    },
        {
          name: "李四",
          age: 25,
          avator: "https://img.yzcdn.cn/vant/cat.jpeg",
        },
        {
          name: "wangwu",
          age: 30,
          avator: "https://img.yzcdn.cn/vant/cat.jpeg",
        },
      ],
      userInfo:{
        name: "zhangsan",
        age: 25,
        hobby: "篮球"
      }


    };
  },
};
</script>
